[Musik spielt]

In diesem Tipp der Woche

zeige ich, wie man ein Akkordeon mit Icons anlegen kann.

Diese Funktion steht seit einigen Versionen des Plugins zur Verfügung.

Und die gute Nachricht: Man muss nichts dafür aktivieren oder

installieren, da das Elements Plugin auf allen CMS Instanzen bereits aktiv ist.

Das heißt als erstes lege ich eine Abschnitts-Überschrift

fest, da ich das Akkordeon in einem Abschnitt anlegen möchte.

Im Anschluss wechsle ich auf den visuellen Editor.

Das funktioniert am oberen rechten Rand.

Füge einen Umbruch ein mit der Enter Taste

und klicke jetzt auf Einfügen

> RRZE Elements > Akkordeon.

Im Anschluss wechsle ich wieder auf den Text Modus

im Text Modus passiert es nämlich seltener,

dass man ungewünschte HTML-Elemente mit hineinkopiert.

Zum Beispiel wenn man

Beispiel-Shortcuts von der Anleitung Seite versucht hinüber zu kopieren,

dann macht das immer Sinn in den Text Modus vorher zu wechseln.

Ich habe jetzt also ein allgemeines Akkordeon.

Wenn ich diese Seite aktualisiere, und in einem neuen Tab öffne,

dann sehe ich auch entsprechend, dass das Akkordeon erstellt wurde.

Ich habe hier zwei Abschnitte

und einen entsprechenden Button, um alle Fächer zu öffnen.

Da ich in einem Abschnitt bin, also in einem H2 Abschnitt bzw.

darüber eine H2 Überschrift liegt, füge ich jetzt das Attribut

hstart="3" ein.

Das macht nichts anderes als jeden dieser einzelnen Abschnitte

eine Überschrift der H3 zu geben, das heißt, die Abschnitts-Überschrift ist

eine H2 Überschrift, Name ist eine H3

Überschrift, Name ist eine H3 Überschrift.

Im Anschluss kann ich erstmal

den Titel festlegen, das heißt Titel des 1.

Fachs und dann zum Beispiel Titel des zweiten

Fachs.

Man kann natürlich auch gleich

den Inhalt hier anpassen und eigene Inhalte einfügen.

Ansonsten hat man mit dem Attribut color die Möglichkeit, Farben auszuwählen

und zwar die Fakultätsfarben.

Ich wähle in diesem Beispiel einfach mal die naturwissenschaftliche Fakultät

und die medizinische Fakultät für die beiden Reiter aus.

Um jetzt ein

Icon auszusuchen, wechselt man auf die Font-Awesome-Seite

Man findet den Link sowohl auf den Anleitungsseiten

im entsprechenden Abschnitt "Icons anlegen" als auch auf dieser Beitrag Seite

noch einmal.

Wer sich den Link vielleicht nicht heraus kopieren konnte,

man sieht, der Link ist "https://fontawesome.com/v4/icons".

Hier werden jetzt alle Icons aufgelistet.

Die man verwenden kann.